<template>
    <div>
      <div class="login-box">
        <h2>星星学苑</h2>
        <form>
          <div class="user-box">
            <input type="text" name="" required="" v-model="username">
            <label>用户名</label>
          </div>
          <div class="user-box">
            <input type="password" name="" required="" v-model="password">
            <label>密码</label>
          </div>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a @click="login">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            登录
          </a>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a @click="register">
            <span></span>
            <span></span>
            <span></span>
            <span></span>注册 </a>
        </form>
      </div>
    </div>
  </template>
  
  <script>
import axios from 'axios'
export default {
  name: 'Login',
  components: {
  },
  data () {
    return {
      username: '',
      password: '',
      showReg: false
    }
  },
  methods: {
    register () {
      const username = this.username
      const password = this.password
      if (!username) return alert('请填写用户名')
      if (!password) return alert('请填写密码')
      // if (username.length < 4) return alert('用户名至少需要4位')
      // if (password.length < 5) return alert('密码至少需要5位')
      this.regiUserInfo(this.username,this.password)
    },
    regiUserInfo(username,password){
      var http = axios.create({
            baseURL: "^/api", 
            timeout: 3000,
            headers: {"Content-Type": "application/json"}  
        });
        let url = "/api/register"; 
        var ip = this.global.ip
        http.post(ip + url, {
            userName: username,            
            pwd: password
        })
        .then(res => {  
          var response = JSON.parse(JSON.stringify(res.data))
          // console.log(response.success)
          if(response.success===1){
            console.log('注册成功')
            alert('注册成功')
          }
        })
        .catch(error => {
            console.log('Error:', error);
            if (error.response) {
            console.log('Response data:', error.response.data);}
        });
    },
    close () {
      this.$emit('close')
    },
    login () {
      const username = this.username
      const password = this.password
      if (!username) return alert('请填写用户名')
      if (!password) return alert('请填写密码')
      this.sendUserInfo(this.username,this.password)
    },
    sendUserInfo(username, password) {
        var http = axios.create({
            baseURL: "^/api", 
            timeout: 3000,
            headers: {"Content-Type": "application/json"}  
        });
        let url = "/api/users"; 
        var ip = this.global.ip
        http.post(ip + url, {
            userName: username,            
            pwd: password
        })
        .then(res => {  
            var response = JSON.parse(JSON.stringify(res.data))
            if(response.success === 1){// 后端允许登录
              this.$cache.userLogin(username, password)
              .then((user) => {
                this.$store.commit('setUser', user)
                this.close()
              })
              .catch((err) => {
                if (err.message === 'password') return alert('密码错误，请重试')
                else console.log(err)
              })
            }else{
              return alert('该用户未注册，请先注册')
            }
        })
        .catch(error => {
            console.log('Error:', error);
            if (error.response) {
            console.log('Response data:', error.response.data);}
        });
    },
  }
}
</script>

  
  <style>
  
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: rgba(3, 174, 140, 0.8);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(19, 248, 225, 0.6);
    border-radius: 10px;
  }
  
  .login-box h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #f0f3f3;
    text-align: center;
  }
  
  .login-box .user-box {
    position: relative;
  }
  
  .login-box .user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #f8fafa;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #03e9f4;
    outline: none;
    background: transparent;
  }
  
  .login-box .user-box label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #f6f7f7;
    pointer-events: none;
    transition: .5s;
  }
  
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #f6f7f7;
    font-size: 12px;
  }
  
  .login-box form a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #f6f7f7;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 40px;
    letter-spacing: 4px
  }
  
  .login-box a:hover {
    background: #03e9f4;
    color: #f6f7f7;
    border-radius: 5px;
    box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 100px #03e9f4;
  }
  
  .login-box a span {
    position: absolute;
    display: block;
  }
  
  .login-box a span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent, #03e9f4);
    animation: btn-anim1 1s linear infinite;
  }
  
  @keyframes btn-anim1 {
    0% {
      left: -100%;
    }
    50%, 100% {
      left: 100%;
    }
  }
  
  .login-box a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #03e9f4);
    animation: btn-anim2 1s linear infinite;
    animation-delay: .25s
  }
  
  @keyframes btn-anim2 {
    0% {
      top: -100%;
    }
    50%, 100% {
      top: 100%;
    }
  }
  
  .login-box a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 5px;
    background: linear-gradient(270deg, transparent, #03e9f4);
    animation: btn-anim3 1s linear infinite;
    animation-delay: .5s
  }
  
  @keyframes btn-anim3 {
    0% {
      right: -100%;
    }
    50%, 100% {
      right: 100%;
    }
  }
  
  .login-box a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #03e9f4);
    animation: btn-anim4 1s linear infinite;
    animation-delay: .75s
  }
  
  @keyframes btn-anim4 {
    0% {
      bottom: -100%;
    }
    50%, 100% {
      bottom: 100%;
    }
  }
  </style>
  